<template>
  <div class="all">
    <div class="add-nav">
      <el-radio-group v-model="select" >
      <el-radio-button :label="true">管理员列表</el-radio-button>
      <el-radio-button :label="false">添加管理员</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 管理员列表 -->
    <div class="add-list" v-show="select">
      <el-table :data="items">
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="adminName" label="用户名"></el-table-column>
        <el-table-column align="center" label="用户权限">
          <template slot-scope='scope'>
            <i v-if="scope.row.adminType==0">超级管理员</i>
            <i v-else>管理员</i>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="lastLogTime" label="上次登录时间"></el-table-column>
        <el-table-column align="center" prop="lastLogIp" label="上次登录IP"></el-table-column>
        <el-table-column align="center" prop="addTime" label="添加时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="msgshop(scope.row)">重置</el-button>
            <el-button type="danger" size="small"@click="del(scope.row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <table width="100%" cellspacing='0'>
        <thead>
          <tr>
            <th> 序号 </th>
            <th> 用户名 </th>
            <th>所属角色</th>
            <th>最后登录IP</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
            <tr v-for="(val,index) in items">
              <td>{{val.id}}</td>
              <td>{{val.admin}}</td>
              <td>{{val.role}}</td>
              <td>{{val.IP}}</td>
              <td><i v-on:click="msgshop(val)">修改</i>  |  <i>删除</i></td>
            </tr>
          </tbody>
      </table> -->
    <!--   <paging :total="items.length" :prepage="prepage" :show-page="a" v-model="sPage"></paging> -->
    </div>
    <!-- 添加管理员 -->
   <div class="add-Add" v-show="!select">
     <el-form :model="ruleForm" ref="ruleForm" :rules="rules" status-icon label-position="right" label-width="100px">
       <el-form-item label="用户名" prop="newAdminName">
         <el-input v-model="ruleForm.newAdminName" placeholder="请输入用户名"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password">
         <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="chenckpass">
                  <el-input type="password" v-model="ruleForm.chenckpass" placeholder="请确认密码"></el-input>
                </el-form-item>
     </el-form>
     <el-button type="primary" @click="Submit">添加</el-button>
    <!--  <div style="margin-top: 11px;">
        <div class="Chnav">
          用  &nbsp;户  &nbsp;名：
         <div class="Chinput">      <input type="text" v-model="admin">
          <i class="notice" v-if="admin.length<2||admin.length>20">用户名应该为2-20位之间</i>
         </div>
        </div>

          <div class="Chnav">
          新  &nbsp;密  &nbsp;码：
          <div  class="Chinput">      <input type="password"  v-model="addPassnew">
           <i class="notice" v-if="addPassnew.length<6||addPassnew.length>20">密码应该为6-20位之间</i>
          </div>
        </div>
        <div class="Chnav Chnav-1">
          确认密码：
          <div class="Chinput">      <input type="password" v-model="addrepetition">
            <i class="notice1" v-if="addrepetition===addPassnew&&addrepetition!=''">密码输入一致</i>
              <i class="notice" v-else>请输入确认密码</i>
          </div>
       </div>
       <button v-if="addrepetition==addPassnew && addPassnew.length>=6 &&admin.length>=2" @click="Submit()">提交</button>
      </div> -->
    </div>
    <!-- 修改管理员密码 -->
<!--    <div class="hide"  v-if="shop">
    <div class="Popup" >
        <h3> 修改用户:{{Madmin}}<i class="el-icon-circle-close" @click="shop=false"></i></h3>
            <el-form ></el-form>
    </div>
    </div>
<div class="pop-up" v-show="shop">
  <h3>修改账号</h3>
  <div class="pop-1">
    修改用户:{{Madmin}}
    <div>
       新密码：
       <div >      <input type="password" v-model="Passnew">
       </div>
     </div>
     <div>
       重复新密码：
       <div>      <input type="password" v-model="repetition">

       </div>
    </div>
  </div>
      <div class="pop-2">
        <button v-if="Passnew!=''&&repetition!=''&&repetition===Passnew">确定</button>
        <button @click="msgPass()">取消</button>
      </div>

</div> -->
  </div>
</template>

<script>
  import {Administration,AdminAdd,deladmin,ModPassword} from '@/utils/API'
  import Cookies from 'js-cookie'
  export default{
    name:'Addadmin',
    inject:["reload"],
    data () {
            var validatePass2 = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            };
      return{
        select:true,
        addPassnew:'',//添加新密码
        addrepetition:'',//添加重复
        items:[],
        ruleForm:{
          newAdminName:'',
          chenckpass:'',
          password:'',
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
        rules: {
                  password: [
                   { required:true , trigger: 'blur',message:'请输入密码' },
                   {min:3,max:12,message: '不能小于两个字或大于十二字',}
                  ],
                  chenckpass: [
                    { validator: validatePass2, trigger: 'blur' }
                  ],
                  newAdminName: [
                    { required:true , trigger: 'blur',message:'请输入账号' },
                    {min:3,max:12,message: '不能小于两个字或大于十二字',}
                  ]
                }
        }
    },

      methods:{
        msgshop:function(e){
  const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '将重置'+e.adminName+'账号的密码,初始密码为'),
            h('i', { style: 'color: teal' }, '123456')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          const data={
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token'),
            modifyAdminName:e.adminName
          }
          ModPassword(data).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
              this.reload()
            }
          })
        });

        },
        Submit(){
            this.$refs.ruleForm.validate((valid)=>{
              if(valid){
                AdminAdd(this.ruleForm).then(res=>{
                  if(res.code==0){
                    this.$message.success('操作成功')
                    this.reload()
                  }
                })
              }
            })
        },
        del(e){
          this.$confirm('是否删除管理员'+e.adminName+'账号','提示',{
             confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                      center: true
          }).then(()=>{
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token'),
              id:e.id
            }
            deladmin(data).then(res=>{
              if(res.code==0){
                this.$message.success('操作成功')
                this.reload()
              }
            })
          }).catch(() => {});
        }
      },
      mounted() {
        const data={
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        }
        Administration(data).then(res=>{
          this.items=res.data
        })
      }

  }
</script>

<style lang="scss" scoped src="../../css/Addadmin.css">


</style>
<style lang="scss" scoped>
  .all{
        padding: 1% 0 0 1%;
  }
.hide{
width: 100%;
    height: 100%;
    position: absolute;
    top: 0;

}
.Popup{
  width: 30%;
  padding-bottom: 10px;
  background-color: #fff;
  position: absolute;
    top: 21vh;
    left: 30%;
  text-align: center;
  z-index: 9;
  border-radius: 5px;
      border: 1px solid #eee;
  h3{
    text-align: left;
    padding: 5px 0 5px 6px;
  }
 .el-textarea{
        width: 80%;
        margin: 2% auto;
        display: block;
  }
  .Tips{
      font-size: 12px;
      padding-top: 5px;
      color: #999;
  }
}
.el-input{
  width: 10%;
}
</style>
